<template>
	<el-dialog
		:close-on-click-modal="false"
		:title="`${$t('system.staff_manage.secret')}`"
		:visible.sync="drawer"
		center
		width="500px"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<div
			v-loading="googleLoading"
			element-loading-spinner="el-icon-loading"
		>
			<el-form ref="form" label-width="auto">
				<el-form-item :label="`${$t('system.staff_manage.secret')}:`">
					<span
						style="color:gray;padding-right:10px;min-width:150px;display:inline-block;"
					>
						{{ googleAuthCode }}
					</span>
					<el-button type="primary" size="mini" @click="copyCode">
						复制
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</el-dialog>
</template>

<script>
export default {
	props: {
		drawer: {
			type: Boolean,
			default: false
		},
		googleLoading: {
			type: Boolean,
			default: false
		},
		googleAuthCode: {
			type: String,
			default: '-'
		}
	},
	methods: {
		copyCode() {
			this.$message.closeAll()
			if (this.googleAuthCode) {
				this.$copyText(this.googleAuthCode).then(() => {
					this.$message.success(this.$t('common.copy'))
				})
			} else {
				this.$message.warning('谷歌密钥获取失败,请稍后重试')
			}
		},
		handleClose() {
			this.$emit('update:drawer', false)
			this.$emit('loadData')
		}
	}
}
</script>
